<template>
	<mu-carousel :transition="'fade'" :hide-indicators="true" :interval="60000">
		<template v-for="(i, idx) in num">
			<mu-carousel-item>
				<img :src="imgsrc(idx%4 + 1)">
			</mu-carousel-item>
		</template>
	</mu-carousel>
</template>

<script>
	import Vue from "vue";
	import { request } from "@/utils/request";
	import MuseUI from 'muse-ui';
	import 'muse-ui/dist/muse-ui.css';
	import '@/assets/muse/MaterialIcons-Regular.css';
	import carouselImg1 from '../../assets/img/c1.jpg';
	import carouselImg2 from '../../assets/img/c2.jpg';
	import carouselImg3 from '../../assets/img/c3.jpg';
	import carouselImg4 from '../../assets/img/c4.jpg';

	Vue.use(MuseUI);

	export default {
		data() {
			return {
				num: 10
			}
		},
		methods: {
			imgsrc(idx) {
				if(idx == 1) {
					return carouselImg1;
				}else if(idx == 2){
					return carouselImg2;
				}else if(idx == 3){
					return carouselImg3;
				}else if(idx == 4){
					return carouselImg4;
				}
			}
		}
	};
</script>

<style lang="less">
	body,html {
		height: 100%;
		background-color: #333333;
	}
	.mu-carousel {
		margin: 0;
		height: 100%;
	}
	.mu-carousel-item img {
		width: 100%;
	}
</style>